/**
 * @flle 页面逻辑
 */
// 生成图表
function createEcharts(res, dom, option) {
  // 折线图
  var chartDom = document.getElementById(dom);
  var myChart = echarts.init(chartDom);

  var series = res.series;
  var xAxis = res.xAxis;

  if (option.xAxis) {
    option.xAxis.data = xAxis;
    option.series[0].data = series;
  } else {
    var optionData = [];
    for (let i = 0; i < series.length; i++) {
      var temp = {};
      temp['value'] = series[i];
      temp['name'] = xAxis[i];
      optionData.push(temp);
    }
    option.series[0].data = optionData;
  }
  option && myChart.setOption(option);
}

// 发起请求
function getEcharts(echartsArr, options) {
  getData({
    url: 'https://edu.telking.com/api/',
    data: {
      type: 'week'
    },
    success: function (res) {
      for (let i = 0; i < echartsArr.length; i++) {
        createEcharts(res, echartsArr[i], options[`option${i + 1}`]);
      }
    }
  });
}

getEcharts(['echarts-one', 'echarts-two', 'echarts-three'], options);

window.addEventListener('load', function () {
  var arrow_l = document.querySelector('.one-focus__arrow-left');
  var arrow_r = document.querySelector('.one-focus__arrow-right');
  var focus = document.querySelector('#focus');
  var focusUl = document.querySelector('#focus-ul');
  var focusWidth = focusUl.offsetWidth;

  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
    timer = null;
  });
  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(function () {
      arrow_r.click();
    }, 2000);
  });

  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.circle');

  for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement('li');

    li.setAttribute('data-index', i);
    ol.appendChild(li);
    li.addEventListener('click', function () {
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      }
      this.className = 'current';
      var index = this.getAttribute('data-index');

      num = index;
      circle = index;
      animate(ul, -focusWidth * index);
    });
  }

  ol.children[0].className = 'current';
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);

  var num = 0;
  var circle = 0;
  var flag = true;
  arrow_r.addEventListener('click', function () {
    if (flag) {
      flag = false;
      if (num == ul.children.length - 1) {
        num = 0;
      }
      num++;
      animate(ul, -num * focusWidth, function () {
        flag = true;
      });
      circle++;
      if (circle == ol.children.length) {
        circle = 0;
      }
      circleChange();
    }
  });
  //9.左侧按钮
  arrow_l.addEventListener('click', function () {
    if (flag) {
      flag = false;
      if (num == 0) {
        num = ul.children.length - 1;
        ul.style.transform = `translate(${-num * focusWidth}px)`;
      }
      num--;
      animate(ul, -num * focusWidth, function () {
        flag = true;
      });
      circle--;
      circle = circle < 0 ? ol.children.length - 1 : circle;
      circleChange();
    }
  });
  // 修改点的样式
  function circleChange() {
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    ol.children[circle].className = 'current';
  }

  var timer = setInterval(function () {
    arrow_r.click();
  }, 2000);
});
